<template>
	<div class="app-container">
		<div class="bgWhite radius8">
			<el-form class="p20 flex col-top row-between" style="padding-bottom: 0;"
				:model="queryParams" ref="queryRef" :inline="true">
				<div>
					<el-form-item label="客户姓名" prop="customerId">
						<el-select style="width: 200px;" v-model="queryParams.customerId" filterable remote reserve-keyword
							:remote-method="customerList" :loading="loading" size="large" placeholder="请输入">
							<el-option v-for="item in customerArr" :key="item.id" :label="item.customerName"
								:value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="跟进人员" prop="staffId">
						<el-select v-model="queryParams.staffId" placeholder="请选择" size="large" style="width: 200px">
							<el-option v-for="dict in teamOptions" :key="dict.userId" :label="dict.userName"
								:value="dict.userId" />
						</el-select>
					</el-form-item>
					<el-form-item label="任务状态" prop="taskStatus">
						<el-select v-model="queryParams.taskStatus" placeholder="请选择" size="large"
							style="width: 200px">
							<el-option v-for="dict in bus_task_status" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="开始时间" prop="time" style="margin-right: 0;">
						<datePickerRange ref="clearPicker" @dateRangeValue="changeTime"></datePickerRange>
					</el-form-item>
				</div>
				<div class="flex col-center row-end" style="width: 160px;margin-right: 0;">
					<el-button class="searchBtn" type="defaultBtn" @click="handleQuery">查询</el-button>
					<el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
				</div>
			</el-form>
		</div>
		<div class="bgWhite radius8 mt20">
			<div class="text-center plr30 pt25 border-bottom pb25 relative">
				<span class="fb mr20">跟进计划</span>
				<div class="flex col-center right-btn">
					<el-button class="mt5" type="defaultBtn" 
					v-hasPermi="['followup_record:add']"
					@click="addPlan()">添加计划</el-button>
				</div>
			</div>
			<div class="p25 fs14" v-if="list.length > 0">
				<el-row class="shadow p20 radius8 mb20" v-for="(item,index) in list" :key="index">
					<el-col :span="4">
						<div class="color2">客户姓名</div>
						<div class="mt15">
							{{item.customerName}}
						</div>
					</el-col>
					<el-col :span="4">
						<div class="color2">计划时间</div>
						<div class="mt15">
							{{item.followupTime}}
						</div>
					</el-col>
					<el-col :span="4">
						<div class="color2 fs14">跟进内容</div>
						<div class="mt15 no-wrap">
							<el-tooltip class="item" effect="dark" :content="item.followupContent" placement="top-start">
							     {{item.followupContent}}
							</el-tooltip>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="color2 fs14">跟进人员</div>
						<div class="mt15">
							{{item.staffName}}
						</div>
					</el-col>
					<el-col :span="4">
						<div class="color2 fs14">状态</div>
						<div class="mt15 flex col-center"
						:class="activeStatus(item.taskStatus)"
						>
							<!-- <span class="dot mr5"></span> -->
							<span class="drop"></span>
							{{item.bus_task_statusName}}
						</div>
					</el-col>
					<el-col :span="4">
						<div class="mt15 text-right">
							<el-button type="operate" style="width: 88px;height: 32px;"
							v-hasPermi="['followup_record:addRecord']"
								@click="checkIn(item)">跟进登记</el-button>
						</div>
					</el-col>
				</el-row>
				<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
					v-model:limit="queryParams.pageSize" @pagination="getList" />
			</div>
			<div v-else>
				<el-empty description="暂无数据"></el-empty>
			</div>
		</div>
		<!-- 添加计划 -->
		<addPlan ref="dialog1" @refresh="getList"></addPlan>
		<!-- 添加跟进 -->
		<addDialog ref="dialog2" :parentId="parentId" :customerId="customerId" @recordList="getList"></addDialog>
		
	</div>
</template>

<script>
	import {
		resetForm,
		getUserInfo
	} from '@/utils/ruoyi'
	import {
		followupRecordList,
		addRecord,
	} from "@/api/business/followup";
	import addPlan from '../components/addPlan.vue' //添加计划
	import addDialog from '../components/checkIn.vue' //添加跟进
	import {
		customerList
	} from "@/api/business/customer";
	import {
		getUserListData
	} from "@/api/business/teamOpportunity";
	export default {
		components: {
			addPlan,
			addDialog,
		},
		data() {
			return {
				parentId: '',
				teamOptions: [],
				customerArr: [], //客户列表
				customerId: '',
				time: '',
				total: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					taskStatus: '', //任务类型
					staffId: '', //跟进人员id
					startTime: '', //开始时间
					endTime: '', //结束时间
					followupType: 0
				},
				bus_task_status: this.useDict("bus_task_status").bus_task_status,
				list: [],
			}
		},
		watch: {

		},
		created() {
			this.getList();
			this.getUserList()
		},
		methods: {
			/**
			 * 获取本人和下级用户数据
			 */
			getUserList() {
				//获取自己和同部门的用户信息
				getUserListData().then(response => {
					this.teamOptions = response.data;
				});

			},
			//添加计划
			addPlan() {
				this.$refs.dialog1.open()
			},
			
			// 客户名称
			customerList(query) {
				if (query !== '') {
					this.loading = true;
					setTimeout(() => {
						this.loading = false;
						let data = {
							keyWords: query
						}
						customerList(data).then(response => {
							this.customerArr = response.rows;
						});
					}, 200);
				} else {
					this.customerArr = [];
				}
			},
			//跟进登记
			checkIn(item) {
				this.parentId = item.id
				this.customerId = item.customerId
				console.log(item, 'id===')
				setTimeout(() => {
					this.$refs.dialog2.open('appPlan')
				}, 500)
			},
			//时间
			changeTime(e) {
				this.queryParams.startTime = e[0]
				this.queryParams.endTime = e[1]
			},
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			//重置
			resetQuery() {
				this.$refs.clearPicker.clearPickerValue()
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					taskStatus: '', //任务类型
					staffId: '', //跟进人员id
					startTime: '', //开始时间
					endTime: '', //结束时间
					followupType: 0
				}
				this.time = ''
				this.handleQuery();
			},
			getList() {
				followupRecordList(this.queryParams).then(res => {
					this.list = res.rows
					this.total = res.total
					for (let key in this.list) {
						for (let j in this.bus_task_status) {
							if (this.list[key].taskStatus == this.bus_task_status[j].value) {
								this.list[key].bus_task_statusName = this.bus_task_status[j].label
							}
						}
					}
				})
			}
		}
	}
</script>

<style>
	.shadow {
		box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08);
	}

	.dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #CCCCCC;
	}

	.no-wrap {
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 200px;
		overflow: hidden;
	}

	.right-btn {
		position: absolute;
		right: 30px;
		bottom: 15px;
	}
</style>